import React, { useState } from 'react'
import { PlusCircleTwoTone, CloseCircleTwoTone } from "@ant-design/icons"
import "./answer.scss"
import { useEffect } from 'react'
const Anwser = (props) => {
    const getProps = () => {
        setAnswer(props.answer)
        setQuestion(props.question)
    }
    useEffect(() => {
        getProps()
    }, [])
    const [questions, setQuestion] = useState("")
    const [answers, setAnswer] = useState("")
    const changeQuestion = (e) => {
        setQuestion(e.target.value)
        props.setA(props.id, questions, answers)
    }
    const changeAnswer = (e) => {
        setAnswer(e.target.value)
        props.setA(props.id, questions, answers)
    }
    return (
        <div className="questions">
            <div>
                <div><span className="questionspan">问</span><input type="text" value={questions} placeholder="请输入你的问题" onChange={(e) => {
                    changeQuestion(e)
                }} /></div>
                <div><span className="answerspan">答</span><input type="text" value={answers} name="answer" placeholder="请输入你的回答" onChange={(e) => {
                    changeAnswer(e)
                }} /></div>
                <div />

            </div>
            <div className="addA">
                <PlusCircleTwoTone style={{ fontSize: "20px" }} onClick={() => {
                    props.addAnswer()
                }} />
                <CloseCircleTwoTone style={{ fontSize: "20px", marginLeft: "20px" }} onClick={() => {
                    props.deleteAnswer()
                }} />
            </div>
        </div>
    )
}
export default Anwser